<template>
    <div class="print-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" class="yuan-modal print-detail-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-title">产品信息</div>
                        <div class="form-panel-box yuan-form-col5">
                            <a-form-model-item class="yuan-form-item" label="分包数量">
                                <span class="yuan-form-show">{{ detailData.subpackageNum }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="已使用">
                                <span class="yuan-form-show">{{ detailData.varietyName }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="产品大类">
                                <span class="yuan-form-show">{{ detailData.productBigKind }}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="存货代码">-->
<!--                                <span class="yuan-form-show">{{ detailData.inventoryCode }}</span>-->
<!--                            </a-form-model-item>-->
                            <a-form-model-item class="yuan-form-item" label="包装批号">
                                <span class="yuan-form-show">{{ detailData.productBatch }}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="状态">
                                <span class="yuan-form-show">{{detailData.printState===0?'未发送':`已发送(${detailData.printNum})`}}</span>
                            </a-form-model-item>
<!--                            <a-form-model-item class="yuan-form-item" label="发药机编码">-->
<!--                                <span class="yuan-form-show">{{detailData.dispensingMachineCoder}}</span>-->
<!--                            </a-form-model-item>-->
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">打印明细</div>
                        <div class="form-panel-box">
                            <a-table bordered :rowKey="getRowKey" :columns="columns" :data-source="detailData.printDetail"
                                :pagination="false"></a-table>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <a-button type="primary" @click="modalOption.onCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { PrintInfoListRes, ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
@Component({
    name: "Detail",
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    logList = [{ id: "" }];
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "printTime",
            key: "printTime",
            title: "打印时间",
        },
        {
            align: "center",
            dataIndex: "codeSendingNum",
            key: "codeSendingNum",
            title: "申请码数",
        },
        {
            align: "center",
            dataIndex: "proposer",
            key: "proposer",
            title: "申请人",
        },
        {
            align: "center",
            dataIndex: "state",
            key: "state",
            title: "状态",
            customRender: (text: any) => {
                return text == 0 ? "打印失败" : "打印成功";
            },
        },
    ];
    getRowKey(item: any) {
        return item.id;
    }
    formLoading = false;
    modalOption = {
        title: "打印详情",
        onCancel: this.closeModal,
    };
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    pageChange() {}
    detailData={} as PrintInfoListRes
    async getDetail() {
        this.formLoading = true;
        try {
            const res = await nextApi.getPrintInfoDetail({ id: this.infoId });
            this.detailData = { ...res.data };
        } finally {
            this.formLoading = false;
        }
    }
}
</script>
<style lang="scss">
.print-detail-modal {
}
</style>
